
import React,{ Component } from 'react';
import { TimePicker,Form,Button } from 'antd';
const FormItem = Form.Item;

class TestTimePicker extends Component {
	constructor(props) {
		super(props);
		this.state = {
			startValue:'',
			endValue: '',
			endOpen: false,
		}
	}
	//开始时间
	onStartChange=(value)=>{
		//console.log('开始时间的改变：',value);
		this.onChange('startValue',value);
	}
	//结束时间
	onEndChange=(value)=>{
		//console.log('结束时间的改变：',value);
		this.onChange('endValue',value);
	}
	//更新时间
	onChange(field,value) {
		this.setState({
			[field]: value,
		})
	}
	//控制面板是否显示
	handleStartOpenChange=(open)=>{
		if(!open) {
			this.setState({
				endOpen: true,
			})
		}
	}
	handleEndOpenChange=(open)=>{
		this.setState({
			endOpen: open,
		})
	}
	render() {
		const { startValue,endValue,endOpen } = this.state;
		const {getFieldDecorator} = this.props.form;
		return (
			<div>
				<FormItem>
					{getFieldDecorator(`conditionDesc`)(
		                <TimePicker
		                	placeholder="请选择开始时间"
		                    format="HH:mm:ss"
							value ={ startValue }
							onOpenChange = { this.handleStartOpenChange }
							onChange= { this.onStartChange }
		                />
		            )}
				</FormItem>
				<FormItem>
					{getFieldDecorator(`conditionDesc1`)(
		                <TimePicker
		                	placeholder="请选择结束时间"
		                    format="HH:mm:ss"
		                    open={ endOpen }
							value ={ endValue }
							onOpenChange={ this.handleEndOpenChange }
							onChange={ this.onEndChange }
							
		                />
		            )}
				</FormItem>
				<Button>
					提交
				</Button>
			</div>
		)
	}
}

export default TestTimePicker = Form.create({})(TestTimePicker);